<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>表格边框测试</title>
    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 32px; /*overflow-y: scroll;*/
      }

      .layui-table-view {
        margin: 8px 0;
      }
    </style>
  </head>
  <body>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </script>

    <blockquote class="layui-elem-quote">无统计、无分页</blockquote>

    <table id="test"></table>

    <blockquote class="layui-elem-quote">有统计、无分页</blockquote>

    <table id="test1"></table>

    <blockquote class="layui-elem-quote">无统计、有分页</blockquote>

    <table id="test2"></table>

    <blockquote class="layui-elem-quote">有统计、有分页</blockquote>

    <table id="test3"></table>

    <script
      src="./assets/dist/layui.js"
      src1="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"
    ></script>
    <script>
      layui.use(['table', 'laydate'], () => {
        var $ = layui.$;
        var table = layui.table;

        var url = './assets/json/table/demo1.json';

        // 无统计、无分页
        table.render({
          elem: '#test',
          url: url,
          // , totalRow: true
          height: 300,
          cellMinWidth: 80,
          //,skin: 'line'
          //,size: 'lg'
          // , toolbar: true
          cols: [
            [
              { field: 'id', hide: true },
              { field: 'username', title: '用户名' },
              { field: 'email', title: '邮箱' },
              { title: '操作', align: 'center', toolbar: '#barDemo' },
            ],
          ],
        });

        // 有统计、无分页
        table.render({
          elem: '#test1',
          url: url,
          totalRow: true,
          height: 300,
          cellMinWidth: 80,
          //,skin: 'line'
          //,size: 'lg'
          // , toolbar: true
          cols: [
            [
              { field: 'id', hide: true },
              { field: 'username', title: '用户名' },
              { field: 'email', title: '邮箱' },
              { title: '操作', align: 'center', toolbar: '#barDemo' },
            ],
          ],
        });

        // 无统计、有分页
        table.render({
          elem: '#test2',
          url: url,
          //,contentType: 'application/json' // 参数为 json 格式传递
          page: {
            // 详细参数可参考 laypage 组件文档
            curr: 5,
            groups: 1,
            first: false,
            last: false,
            layout: ['limit', 'prev', 'page', 'next', 'count'], //自定义分页布局
          },
          // , totalRow: true
          height: 300,
          cellMinWidth: 80,
          //,skin: 'line'
          //,size: 'lg'
          // , toolbar: true
          cols: [
            [
              { field: 'id', hide: true },
              { field: 'username', title: '用户名' },
              { field: 'email', title: '邮箱' },
              { title: '操作', align: 'center', toolbar: '#barDemo' },
            ],
          ],
        });

        // 有统计、有分页
        table.render({
          elem: '#test3',
          url: url,
          //,contentType: 'application/json' // 参数为 json 格式传递
          page: {
            // 详细参数可参考 laypage 组件文档
            curr: 5,
            groups: 1,
            first: false,
            last: false,
            layout: ['limit', 'prev', 'page', 'next', 'count'], //自定义分页布局
          },
          totalRow: true,
          height: 300,
          cellMinWidth: 80,
          //,skin: 'line'
          //,size: 'lg'
          // , toolbar: true
          cols: [
            [
              { field: 'id', hide: true },
              { field: 'username', title: '用户名' },
              { field: 'email', title: '邮箱' },
              { title: '操作', align: 'center', toolbar: '#barDemo' },
            ],
          ],
        });
      });
    </script>
  </body>
</html>
